import React, {useEffect, useState} from 'react';
import FunChildren from '@/components/10- useEffect/FunChildren'

function App(props) {
    /**
     * 同一个函数组件可以有多个useEffect，都会生效
     * 1. 10- useEffect(回调函数）componentDidMount + all componentDidUpdate
     * 2. 10- useEffect(回调函数, []）componentDidMount
     * 3. 10- useEffect(回调函数, [state,props]）componentDidMount + componentDidUpdate [数组中监听的]
     */
    let [num, setNum] = useState(true);
    useEffect(() => {
        console.log("父组件挂载阶段触发")
        return () => {
            // componentWillUnmount
            console.log("卸载阶段触发")
        }
    }, [])
    useEffect(() => {
        console.log("num更新触发")
    }, [num])
    return (
        <div>
            <h4>函数组件 ==> 父组件</h4>
            <button onClick={() => setNum(!num)}>切换</button>
            {num && <FunChildren></FunChildren>}
        </div>
    );
}

export default App;